"use client"
import {useTranslations} from "next-intl";
import Image from "next/image";
import {useParams, useRouter} from "next/navigation";

export default function Inductive() {
  const params = useParams()
  const router = useRouter()
  const t = useTranslations("home")

  const dataSource = [
    {
      title: "photoelectric.product-1.title",
      info: "photoelectric.product-1.info",
      url: "http://i18nport.dongsongkeji.com.cn/upload/99428567-473e-5d9f-802e-baee4c7cf345.png",
      path: `/${params.locale}/photoelectric/${t("third.product")}`,
      margin: false
    },
    {
      title: "photoelectric.product-2.title",
      info: "photoelectric.product-2.info",
      url: "http://i18nport.dongsongkeji.com.cn/upload/8ee42c63-b5d7-5928-893b-178249421758.png",
      path: `/${params.locale}/photoelectric/${t("third.product")}`,
      margin: true
    },
    {
      title: "photoelectric.product-3.title",
      info: "photoelectric.product-3.info",
      url: "http://i18nport.dongsongkeji.com.cn/upload/804de5bc-c033-5cc4-8dc9-cf1cffb7be59.png",
      path: `/${params.locale}/photoelectric/${t("third.product")}`,
      margin: false
    },
  ]
  return <div className={"position-container"}>
    <div className={"flex justify-between my-6 h-80"}>
      <div className={"flex-1 pr-10"}>
        <h1 className={"text-3xl border-b-2 py-3"}>{t("third.product")}</h1>
        <p className={"text-2xl mt-10 mb-4"}>{t("third.product-title")}</p>
        <p className={"pr-16 text-gray-500 text-over-6"}>{t("third.product-info")}</p>
      </div>
      <div style={{
        background: "url('https://omo-oss-image.thefastimg.com/portal-saas/ngc202211220002/cms/image/9ce9f1e9-8b23-46d8-b96c-c50f78f7074f.jpg')",
        backgroundPosition: "100% 100%"

      }} className={"w-96 h-96 justify-self-end flex justify-center items-center"}>
        <img
            width={180}
            height={180}
            className={"hover:scale-100 scale-90 max-w-full max-h-full object-contain transition-all"}
            src="http://i18nport.dongsongkeji.com.cn/upload/d4b23693-86e5-51d2-bb82-fdd4f433bc64.png"
            alt=""/>
      </div>
    </div>

    <div className={`pb-10 overflow-hidden`}>
      <p className={`text-xl mt-16 font-semibold`}>{t("series")}</p>
      <ul className={`flex flex-wrap justify-between`}>
        {dataSource.map((item) => {
          return <li key={item.title}
                     onClick={() => router.push(`${item.path}?series=${t(item.title)}`)}
                     className={`w-96 group ${item.margin && "mx-10"} hover-bottom-line shadow hover:shadow-xl transition-all h-[435px] mt-4`}
          >
            <div className={"bg-gray-100 px-10 h-full rounded overflow-hidden"}>
              <img className={`my-6 h-[200px] object-contain group-hover:scale-105 transition-all duration-500 cursor-pointer`}
                     width={300} height={200} src={item.url}
                     alt="">
              </img>
              <h1 className={`my-3 text-xl font-semibold`}>{t(item.title)}</h1>
              <p className={"text-over-3"}>{t(item.info)}</p>
            </div>
          </li>
        })}
      </ul>
    </div>
  </div>
}